<template>
  <div v-loading="loading" class="order-detail">
    <order-step v-if="showStep" :type="type" :deal="deal" :status="status" />
    <div class="info-container">
      <div class="user-info">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单信息</span>
            <div class="btn-wrap">
              <el-button v-if="Number(detail.status) === 1 && Number(detail.is_deal) === 0" type="success" style="float: right;width: 120px;" round @click="handleAccept">接单</el-button>
              <el-button v-if="Number(detail.status) === 1 && Number(detail.is_deal) === 1" type="primary" style="float: right;width: 120px;" round @click="handleOpenDialog">核销</el-button>
              <el-button v-if="Number(detail.status) === 5 && refuse" type="danger" style="float: right;width: 120px;" round @click="handleOpenDialogSale">售后</el-button>
            </div>
          </div>
          <div class="info" style="height: 150px;">
            <el-row class="info-content">
              <div class="info-title">订单编号：</div>
              <div>{{ detail.order_no }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">订单名称：</div>
              <div>{{ detail.order_name }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">用户昵称：</div>
              <div>{{ detail.nickname }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">用户账号：</div>
              <div>{{ detail.username }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">套餐金额：</div>
              <div>{{ detail.amount }}</div>
            </el-row>
          </div>
        </el-card>
      </div>
      <div class="package">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单状态</span>
            <div class="btn-wrap">&nbsp;</div>
          </div>
          <div class="info">
            <el-row class="info-content">
              <div class="info-title">订单状态：</div>
              <el-tag type="success">{{ statusTypeFuc(detail.status, detail.deal, detail.sub_type) }}</el-tag>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">创建时间：</div>
              <div>{{ detail.create_at ? parseTimeFuc(detail.create_at) : '' }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">付款时间：</div>
              <div>{{ detail.pay_at ? parseTimeFuc(detail.pay_at) : '' }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">核销时间：</div>
              <div>{{ detail.checkin_at ? parseTimeFuc(detail.checkin_at) : '' }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">完成时间：</div>
              <div>{{ detail.finish_at ? parseTimeFuc(detail.finish_at) : '' }}</div>
            </el-row>
          </div>
        </el-card>
      </div>
      <div class="package">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>套餐信息</span>
            <div class="btn-wrap">&nbsp;</div>
          </div>
          <div v-if="detail.package_info" class="info table-list">
            <div v-for="(item, index) of detail.package_info" :key="index" style="margin-bottom: 15px">
              <el-row class="info-content">
                <div class="info-title">分类信息：</div>
                <div>{{ item.package_cate_name }}</div>
              </el-row>
              <el-table ref="multipleTable" :data="item.goods" border tooltip-effect="dark" style="width: 100%;margin-bottom: 20px">
                <el-table-column prop="name" label="商品名称" min-width="200" :show-overflow-tooltip="true" />
                <el-table-column prop="unit" label="单位" width="100" />
                <el-table-column prop="price" label="价格" width="100" />
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
      <div class="package">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>支付状态</span>
            <div class="btn-wrap">&nbsp;</div>
          </div>
          <div class="info" style="height: 300px; overflow-y: scroll;">
            <el-row class="info-content">
              <div class="info-title">支付状态：</div>
              <el-tag v-if="detail.pay" type="success">{{ detail.pay.status === 0 ?'未支付': detail.pay.status === 1? '支付中' : '已支付' }}</el-tag>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">支付方式：</div>
              <div>&nbsp;</div>
            </el-row>
            <el-row v-if="detail.pay" class="info-content">
              <div v-for="(item, index) of detail.pay.items" :key="index" class="pay-type">
                <div class="info-title">{{ payTypeFuc(item.pay_way) }}：</div>
                <div>{{ item.amount }}</div>
              </div>
            </el-row>
            <el-row v-show="Number(detail.status > 4)" class="info-content">
              <div class="info-title">申请退款金额：</div>
              <div>{{ detail.return_amount }}</div>
            </el-row>
            <el-row v-show="Number(detail.status > 4)" class="info-content">
              <div class="info-title">退款理由：</div>
              <div style="padding-right: 10px; box-sizing:border-box;">{{ detail.return_reason }}</div>
            </el-row>
            <el-row v-show="Number(detail.status > 4)" class="info-content">
              <div class="info-title">售后申请时间：</div>
              <div>{{ detail.return_apply_at ? parseTimeFuc(detail.return_apply_at) : '' }}</div>
            </el-row>
            <hr>
            <el-row v-show="Number(detail.status > 4)" class="info-content">
              <div class="info-title">商家退款金额：</div>
              <div>{{ detail.return_process_amount ? detail.return_process_amount : '' }}</div>
            </el-row>
            <el-row v-show="Number(detail.status > 4)" class="info-content">
              <div class="info-title">售后处理时间：</div>
              <div>{{ detail.return_process_at ? parseTimeFuc(detail.return_process_at) : '' }}</div>
            </el-row>
            <el-row v-show="Number(detail.status > 4)" class="info-content">
              <div class="info-title">备注：</div>
              <div style="padding-right: 10px; box-sizing:border-box;">{{ detail.return_desc ? detail.return_desc : '' }}</div>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="订单核销"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
      :center="true"
    >
      <div class="charge" style="display:flex;align-items: center;">
        <div class="title">核销码：</div>
        <el-input v-model="code" style=" width: 200px;margin-left: 20px;" class="edit-input" placeholder="请输入六位核销码" size="small" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCancel">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="订单售后处理"
      :visible.sync="dialogSale"
      width="30%"
      :append-to-body="true"
      :center="true"
    >
      <div class="charge" style="display:flex;align-items: center;margin-bottom:15px;">
        <div class="title" style="width: 80px">金额：</div>
        <el-input v-model="price" style=" width: 200px;margin-left: 20px;" class="edit-input" placeholder="请输入退款金额" size="small" />
      </div>
      <div class="charge" style="display:flex;align-items: center;">
        <div class="title" style="width: 80px">备注：</div>
        <el-input v-model="desc" style=" width: 300px;margin-left: 20px;" type="textarea" placeholder="请输入备注内容" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleRefuse">拒绝售后</el-button>
        <el-button type="success" @click="handleAfterSale">同意售后</el-button>
      </span>
    </el-dialog>
    <print v-if="showStep" :type="1" :info="detail" />
  </div>
</template>

<script>
import OrderStep from '@/components/orderStatusStep'
import { statusType, payType } from '@/utils/order'
import { orderDetail, orderAccept, chargeOff, afterSale } from '@/api/order'
import Print from '@/components/print'
import { parseTime } from '@/utils'
export default {
  name: 'OrderDetail',
  components: {
    OrderStep,
    Print
  },
  data() {
    return {
      type: 1,
      status: 1,
      deal: 0,
      detail: {},
      statusTypeFuc: statusType,
      parseTimeFuc: parseTime,
      payTypeFuc: payType,
      dialogVisible: false,
      code: '',
      dialogSale: false,
      price: '',
      desc: '',
      refuse: true,
      loading: false
    }
  },
  computed: {
    showStep() {
      return Object.keys(this.detail).length
    }
  },
  created() {
    this.initDetail()
  },
  methods: {
    async initDetail() {
      this.loading = true
      const { order_no } = this.$route.query
      const res = await orderDetail({ order_no })
      this.loading = false
      const { detail } = res.data
      if (!res.data.detail) {
        this.detail = {}
      } else {
        this.detail = detail
        this.price = detail.return_amount
      }
      this.type = detail.sub_type
      this.status = detail.status
      this.deal = detail.is_deal
    },
    // 接单
    async handleAccept() {
      const { order_no } = this.$route.query
      try {
        await orderAccept({ order_no })
        this.$message.success({
          message: '恭喜你，接单成功',
          duration: 1000
        })
        this.initDetail()
      } catch (error) {
        this.$message.warning({
          message: '接单失败',
          duration: 1000
        })
      }
    },
    handleOpenDialog() {
      this.dialogVisible = true
    },
    // 核销
    async handleCancel() {
      const { code } = this
      if (code.trim() === '') {
        this.$message.warning({
          message: '核销码不能为空',
          duration: 1000
        })
        return
      }
      try {
        await chargeOff({ write_off_code: code })
        this.$message.success({
          message: '恭喜你，核销成功',
          duration: 1000
        })
        this.dialogVisible = false
        this.initDetail()
      } catch (error) {
        this.$message.error({
          message: '核销失败',
          duration: 1000
        })
        this.dialogVisible = false
      }
    },
    // 售后
    handleOpenDialogSale() {
      this.dialogSale = true
    },
    // 拒绝售后
    async handleRefuse() {
      const { detail, desc } = this
      await afterSale({ order_no: detail.order_no, amount: '', reason: desc, state: -1 })
      this.dialogSale = false
      this.refuse = false
      this.$message.success({
        message: '拒绝售后成功',
        duration: 1000
      })
      await this.initDetail()
    },
    // 同意售后
    async handleAfterSale() {
      const { price, detail, desc } = this
      console.log(desc)
      if (price.trim() === '') {
        this.$message.warning({
          message: '退款金额不能为空',
          duration: 1000
        })
        return
      } else if (isNaN(Number(price))) {
        this.$message.warning({
          message: '退款金额应为数字',
          duration: 1000
        })
        return
      } else {
        if (Math.round(Number(price)) > Number(detail.amount) || Math.round(Number(price)) < 0) {
          this.$message.warning({
            message: '退款金额不能大于套餐金额且小于0',
            duration: 1000
          })
          return
        }
      }
      await afterSale({ order_no: detail.order_no, amount: price, reason: desc, state: 1 })
      this.dialogSale = false
      this.refuse = false
      this.$message.success({
        message: '同意售后成功',
        duration: 1000
      })
      await this.initDetail()
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail {
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2000;
  overflow-y: scroll;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  .info-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .user-info, .package {
      width: 50%;
      padding: 5px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .box-card{
      width: 100%;
      .btn-wrap{
        display: flex;

      }
      .btn{
        margin-right: 10px;
        cursor: auto
      }
      .info-content{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .info-title {
          width: 100px;
          min-width: 100px;
          white-space: nowrap;
          margin-right: 10px;
        }
        .pay-type{
          margin-bottom: 10px;
          padding-left: 20px;
          display: flex;
          box-sizing: border-box;
        }
      }
      .table-list{
        height: 300px;
        overflow-y: scroll;
      }
    }
    .clearfix{
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &::after{
        display: none
      }
    }
  }
}
</style>
